<template>
   <div class="box" ref="boxRef"></div>
</template>
<!-- 
    axios+echarts+vue3的步骤
    1、安装axios和echarts
    2、在template中定义一个显示echarts的容器
    3、定义ref变量用来实现在vue3中操作DOM容器
    4、引用echarts包，然后在onMounted生命周期中初始化echarts对象
    5、要从后端获取到数据
 -->
<script lang='ts' setup>
import {ref,onMounted,reactive,computed,watch} from 'vue'
import * as echarts from 'echarts'
import axios from 'axios';
const boxRef=ref<HTMLElement>() 
const data=reactive({
    ydata:[]
})
const getEchartsData=async()=>{
   const result=await axios.get('https://www.fastmock.site/mock/d550ebe10fa16e11d2e101275d951ca5/w16/getData')
   data.ydata=result.data
}

getEchartsData()
const option=computed(()=>({
    xAxis:{
        data:['衣服','鞋子','包','袜子','裤子','手套']
    },
    yAxis:{},
    series:[
        {
            type:'line',
            data:data.ydata
        }
    ]
}))

let mychart:any=null
watch(()=>data.ydata,()=>{
    //当响应式数据变化后会调用
    if(mychart!=null){
        mychart.setOption(option.value)
    }    
})
onMounted(()=>{
    //对chart对象进行初始化
   mychart=echarts.init(boxRef.value)
  
})
</script>

<style lang='scss' scoped>
.box{
    margin: 0 auto;
    width: 900px;
    height: 500px;
    background-color: #ccc;
}
</style>    